<template>
    <div>
        <van-tabbar v-model="$route.meta.active" active-color="#C14374" inactive-color="#BEBEBE" route>
            <van-tabbar-item replace  to="/" icon="wap-home">首页</van-tabbar-item>
            <van-tabbar-item replace  to="/destination" icon="map-marked">目的地</van-tabbar-item>
            <van-tabbar-item to="/individual" icon="setting-o">定制游</van-tabbar-item>
            <van-tabbar-item to="/find" icon="search">发现</van-tabbar-item>
            <van-tabbar-item to="/register" icon="manager">我的</van-tabbar-item>
        </van-tabbar>
    </div>
    <!-- <div class="Tabbar">
        <div>
            <van-icon name="wap-home" />
        </div>
        <div>
            <van-icon name="location" />
        </div>
        <div>
            定制游
        </div>
        <div>
            <van-icon name="search" />
        </div>
        <div>
            <van-icon name="manager" />
        </div>
    </div> -->
</template>

<script>
export default {
    data() {
        return {
            active: 0,
        };
    },
};
</script>

<style lang="scss" scoped>
.Tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    height: 0.6rem;
    background-color: aqua;
    div {
        width: 20vw;
        text-align: center;
        font-size: 0.4rem;
        color: red;
    }
}
.van-tabbar {
    height: 0.6rem;
    font-size: 0.4rem;
    .van-tabbar-item {
        font-size: 0.2rem;
    }
}
</style>